<template>
  <div class="block-wrap">
    <div class="title">{{ $t('notice.bindUsers') }}</div>
    <div class="block" v-loading="loading">
      <div class="users">
        <wechat-users-table
          :users="wechatUsers.slice(0, 5)"
          @unbind="unbind"
        ></wechat-users-table>
        <div class="more" v-if="wechatUsers.length > 5">
          <el-button size="mini" type="text" @click="dialogVisible = true">{{ $t('notice.more') }}></el-button>
        </div>
      </div>
    </div>
    <el-dialog
        :visible.sync="dialogVisible"
        :title="$t('notice.bindUsers')"
        width="640px"
        v-loading="loading"
    >
      <wechat-users-table
          :users="wechatUsers"
          @unbind="unbind"
      ></wechat-users-table>
    </el-dialog>
  </div>
</template>

<script>

import WechatUsersTable from "@/views/user/notice/components/WechatUsersTable.vue";
import {getBindWechatUser, unbind} from "@/api/notice";
export default {
  components: {
    WechatUsersTable,
  },
  data() {
    return {
      loading: false,
      wechatUsers: [],
      dialogVisible: false,
    }
  },
  created() {
    this.getBindWechatUser();
  },
  methods: {
    getBindWechatUser() {
      this.loading = true;
      getBindWechatUser({page: 1, pageSize: 100000})
          .then(res => {
            this.wechatUsers = res.data;
            this.loading = false;
          });
    },
    unbind(row) {
      this.$confirm(this.$t('notice.unbindTips1'), this.$t('notice.unbindTips2', [row.nickname]), {
        type: 'warning'
      })
          .then(() => {
            this.loading = true;
            unbind(row.id)
                .then(res => {
                  this.$message.success(this.$t('notice.unbindTips3'));
                  this.getBindWechatUser();
                  this.loading = false;
                });
          })
          .catch(() => {

          });
    },
  }
}
</script>

<style scoped lang="less">
@import "../style/notice-global";
.more{
  text-align: right;
}
</style>
